<template>
  <div class="userinfo">
    <div class="userinfo-body">
      <div class="userinfo-title">
        <i @click="goregister" class="iconfont icon-arrow-right"></i>
      </div>
      <van-field v-model="tel" label="昵称" input-align="right" />
      <van-field
        readonly
        clickable
        name="picker"
        :value="sex"
        label="性别"
        placeholder="请选择您的性别"
        @click="showPicker = true"
        input-align="right"
      />
      <van-popup v-model="showPicker" position="bottom">
        <van-picker
          show-toolbar
          :columns="columns"
          @confirm="sexcheck"
          @cancel="showPicker = false"
        />
      </van-popup>
      <van-field
        readonly
        clickable
        name="area"
        :value="value"
        label="地区选择"
        placeholder="点击选择省市区"
        @click="showArea = true"
        input-align="right"
      />
      <van-popup v-model="showArea" position="bottom">
        <van-area
          :area-list="areaList"
          @confirm="onConfirm"
          @cancel="showArea = false"
        />
      </van-popup>
      <van-field
        readonly
        clickable
        name="picker"
        :value="birthday"
        label="生日"
        placeholder="请选择您的生日"
        @click="showBR = true"
        input-align="right"
      />
      <van-popup v-model="showBR" position="bottom">
        <van-datetime-picker
          v-model="currentDate"
          type="date"
          title="选择年月日"
          :min-date="minDate"
          @confirm="onbirthday"
          @cancel="showBR = false"
        />
      </van-popup>
      <div class="button-box">
        <button @click="creatuser">确定</button>
      </div>
      <div class="userinfo-footer">
        <span>生活从来都不缺少美</span>
      </div>
    </div>
  </div>
</template>

<script>
import { Toast } from 'vant';
import areaList from '@/Photography/assets/js/area'
export default {
  name: 'usertinfo',
  data() {
    return {
      value: '',
      showArea: false,
      areaList, // 数据格式见 Area 组件文档
      showPicker:false,
      sex:'',
      columns:["男","女"],
      showBR: false,
      birthday:'',
      currentDate: new Date(),
      minDate: new Date(1900, 0, 1),
      tel:'',
      register: {},
    }
  },
  created() {
    this.register = this.$route.params.register
    console.info(this.register)
  },
  methods: {
    onConfirm(values) {
      if (values[2]){
        this.value = values[1].name + " " + values[2].name;
      }else {
        this.value =values[1].name;
      }
      this.showArea = false;
    },
    sexcheck(value) {
      this.sex = value;
      this.showPicker = false;
    },
    onbirthday(value) {
      const year = new Date(value).getFullYear();
      const mouth = new Date(value).getMonth()+1;
      const day = `${new Date(value).getDate()}`.padStart(2, 0)
      this.birthday = `${year}-${mouth}-${day}`
      this.showBR = false;
    },
    async creatuser(){
      try {
        const res = await this.$axios({
          url: '/blog/usercreat',
          method: 'post',
          data: {
            username: this.tel,
            sex: this.sex,
            birthday: new Date(this.birthday).getTime(),
            area: this.value,
            phone: this.register.phone,
            pas: this.register.pas,
          }
        })
        const { success, msg } = res.data
        if( success ){
          Toast.success('注册成功');
          setTimeout(()=>{
            this.$router.replace('/')
          },1000)
        }else {
          Toast.fail(msg);
        }
      }catch (e) {
        Toast.fail(e);
      }

    },
    goregister(){
      this.$router.replace("/")
    },
  },
};
</script>

<style scoped lang="scss">
.userinfo{
  background: url(../assets/register.jpg)center;
  background-size: cover;
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
  .userinfo-title{
    margin-top: vw(30);
    width: 100%;
    height: vw(90);
    box-sizing: border-box;
    line-height: vw(90);
    i{
      margin-left: vw(30);
      font-size: vw(50);
      color: #c1c1c1;
    }
  }
  .userinfo-body{
    height: 100%;
    margin: 0 auto;
    background-color: #32323290;
    border-radius: vw(20);
    padding-bottom: vw(50);
    overflow: hidden;
    .van-cell{
      width: vw(550);
      margin: vw(50) auto;
      background-color: #ffffff00;
      color: #c1c1c1;
      border-bottom: 1px solid #c1c1c1;
      input{
        color: #c1c1c1;
      }
    }
    .button-box{
      margin: vw(100) auto;
      text-align: center;
      button{
        padding: vw(15) vw(130);
        outline: none;
        background-color: #ffffff00;
        border: 1px solid #ffffff;
        border-radius: vw(10);
        color: #ffffff;
        &:active{
          background-color: #c1c1c130;
        }
      }
    }
    .userinfo-footer{
      width: 100%;
      position: fixed;
      bottom: vw(200);
      text-align: center;
      span{
        color: #ffffff90;
        font-size: vw(40);
      }
    }
  }
}

::v-deep .van-field__value .van-field__body .van-field__control,.van-field__label{
  color: #c1c1c1!important;
}
::v-deep .van-cell::after{
  border-bottom: 0!important;
}

</style>
